<!--弹窗功能-->
<template>
  <div class="mc-el-drawer">
    <!--用户反馈太多弹窗不好识别-->
    <span class="mc-el-drawer-assist" v-if="title">{{title}}</span>
    <el-drawer ref="elDrawer" class="mc-on-shade10" :visible.sync="visibleVal" :modal="modalValue"  :title="title" v-bind="$attrs" v-on="$listeners" @close="close">
      <slot></slot>
      <span class="drawer-footer">
          <slot name="footer"></slot>
      </span>
    </el-drawer>
  </div>
</template>

<script>
export default {
    name: 'mc-drawer',
    data () {
        return {
          modalValue:window.iframeUi?false:this.modal
        }
    },
    computed:{
      visibleVal: {
        get() {
          if(this.visible){
            if(window.iframeUi){
              this.setWinDrawer(true);
            }
          }
          return this.visible
        },
        set(val) {
          this.$emit('update:visible', val)
        }
      }
    },
    props: ['visible','title','modal','mcName'],
    mounted () {
        if(window.iframeUi){
            this.$emit("update:visible",this.getWinDrawer());//只要在布局里就给它加载 就弹出来
        }
        this.fixElementMcDom();
    },
    methods:{
        setWinDrawer(val){
            if(!window.__mcDrawer){
              window.__mcDrawer={};
            }
            var mcId = this.findMcId();
            if(mcId){
                window.__mcDrawer[mcId] = val;
            }
        },
        getWinDrawer(){
            if(!window.__mcDrawer){
              window.__mcDrawer={};
            }
            var mcId = this.findMcId();
            if(mcId){
              return window.__mcDrawer[mcId];
            }
            return false;
        },
        close(){
          if(window.iframeUi){
            this.setWinDrawer(false);
          }
        },
        getComponent(){
          return this.$refs.elDrawer;
        },
        closeDrawer(){
            this.getComponent().closeDrawer();
        },
        //加上title的化 可以区分存在同一个组件内多个弹窗
        findMcId(){
          if(window.iframeUi&&window.iframeUi.jsonFactory){
              var magicalCoderIdAttrName = window.iframeUi.jsonFactory.api().getMagicalCoderIdAttrName();
              var $drawerEl = $(this.$el);
              var mcid = $drawerEl.attr(magicalCoderIdAttrName);
              if(mcid){
                return this.mcName+mcid;
              }
              var body = $drawerEl.find(".el-drawer__body");
              if(body.length>0){
                mcid = body.attr(magicalCoderIdAttrName);
                if(mcid){
                  return this.mcName+mcid;
                }
              }
              //那就是被嵌入到其他组建内部了 取当前组件
              var p = $drawerEl.parent();
              var maxWhile =0;
              while(p && p.length>0 && !p.attr(magicalCoderIdAttrName)&&maxWhile++<1000){
                p = p.parent();
              }
              if(p && p.length>0){
                  return this.mcName+p.attr(magicalCoderIdAttrName);
              }
          }
          return null;

        },
        fixElementMcDom(){
          if(window.iframeUi&&window.iframeUi.jsonFactory){
            this.$nextTick(()=>{//虚拟dom转化为真实dom后触发 这样动态新增的结构里 仍然可以被拖拽
              // console.log("刷新")
              var style = $(this.$refs.elDrawer.$el).css("z-index")
              if(style){
                style = parseInt(style)
                if(style<=10000){
                  style+=10000;
                }
              }else {
                style = 10001
              }
              $(this.$refs.elDrawer.$el).css("z-index",style)
              //修复下弹窗面板 把我的id吃掉了
              var dragMcPane = window.iframeUi.jsonFactory.api().pubGetDragMcPaneName();
              var magicalCoderIdAttrName = window.iframeUi.jsonFactory.api().getMagicalCoderIdAttrName();
              //var container = $("#magicalDragSceneGhost").length>0?$("#magicalDragSceneGhost") : $("#magicalDragScene");
              var needRefresh = false;
              var $dom = $(this.$el);
              $dom.removeClass(dragMcPane)
              var body = $dom.find(".el-drawer__body");
              if(body.length>0){//elementui 你为啥开始不创建这个结构烦死
                var elDrawerWrapper = body.parents('.mc-el-drawer');
                var mcId = elDrawerWrapper.attr(magicalCoderIdAttrName);
//                  elDrawerWrapper.removeAttr(magicalCoderIdAttrName);
                elDrawerWrapper.removeClass(dragMcPane);
                body.attr(magicalCoderIdAttrName,mcId);
                body.addClass(dragMcPane);
                needRefresh=true;
              }
              $(".v-modal").click(function(){
                $(".v-modal").remove();
              })
              if(needRefresh){
                window.iframeUi.magicalApi.addApiTask({methodName:"refreshDragEvent"});
              }
            })
          }
        }
    },
    updated:function(){
      this.fixElementMcDom();
    },
}
</script>

<style lang="scss">
  .mc-el-drawer-assist{
    display: none;
  }
  .magicalcoder-dragging .mc-el-drawer>.mc-el-drawer-assist{
    display: inline-block;
  }
  .magicalcoder-dragging .mc-el-drawer[data-magical__coder__id]:before{
    content: '抽屉';
  }
  .magicalcoder-dragging .mc-el-drawer{
      .el-drawer__headerbtn{
        top:10px;
      }
  }
  .mc-el-drawer{
    .el-drawer {
      padding:0px 0px 40px 0px;
      .el-drawer__body {
          padding:10px;
          overflow-y:auto;
          .mc-ui-absolute-pane{
              position: relative;
              height : 100%;
          }
      }
      .drawer-footer{
          position: absolute;
          right:16px;
          bottom:4px;
      }

    }
  }

</style>
